//out:'../css/'
@import url(./base.less);
@vw:3.75vw;
// 头部
header{
    margin-top: (20/@vw);
    width: (375/@vw);
    height: (44/@vw);
    display: flex;
    align-items: center;
    .icon-bilibili-copy{
        margin: 0 (110/@vw) 0 (5/@vw);
        font-size: (28/@vw);
        color: pink;
    }
    .icon-sousuo{
        margin-right: (25/@vw);
    font-size: (22/@vw);
    }
   .pic{
    margin-right: (25/@vw);
    width: (24/@vw);
    height:(24/@vw);
   }
   .picc{
   width: (72/@vw);
   height: (24/@vw);
   }
}
// tab类别
.tab{
    width: (375/@vw);
    height: (40/@vw);
    padding: (10/@vw) ;
    ul{
        display: flex;
        justify-content: space-between;
        width: (335/@vw);
        height: (38/@vw);
        li{
            width: (60/@vw);
            height: (38/@vw);
            a{
                display: block;
                width: (28/@vw);
                height: (38/@vw);
                font-size: (14/@vw);
            }
          
        }
        .first{
            a{
                color: pink;
                border-bottom: 2px solid pink;
            }
        }
        .body{
            width: (40/@vw);
            height: (40/@vw);
            text-align: center;
           
            .icon-xiangxia{
                display: block;
                margin-top: (3/@vw);
                font-size: (14/@vw);
            color: #ccc;
            }
            
            
        }
        
    }
   

}
// 内容
.nav{
    padding: (8/@vw)(3/@vw);
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   .one{
    width: (182.5/@vw);
    height: (171/@vw);
    .card{
        position: relative;
        padding: (3/@vw);
        .count{
            padding: (12/@vw);
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            p{
                color: #fff;
            }
        }
    }
    img{
        width: (172.5/@vw);
        height: (97/@vw);
    }
   }
}
// 底部
footer{
    position: fixed;
    left: (8/@vw);
    bottom: (10/@vw);
    width: (351/@vw);
    height: (36/@vw);
    text-align: center;
    border-radius: (18/@vw);
    background-color: pink;
    span{
        line-height: (36/@vw);
        font-size: (14/@vw);
        color: #fff;
    }
}